

import ClickIndex from '../../page/click/index'; // 导入点击事件
export default class SidebarPopup {
	static instance = null;

	constructor() {
		if (SidebarPopup.instance) return SidebarPopup.instance;
		SidebarPopup.instance = this;
		// 弹窗配置
		this.config = {
			panel: { x: 0, y: 20, w: 340, h: 600, radius: 15 }, // 原尺寸50%
			colors: {
				mainBg: ['#666666', '#333333'], // 深绿色渐变
				titleGradient: ['#FFD700', '#D4AF37'], // 金色标题
				stepCircle: '#4CAF50', // 步骤绿色圆圈
				buttonBg: '#4CAF50' // 按钮绿色
			},
			steps: [
				{ num: 1, text: "点击侧边栏图标", x: 30, y: 50, imgPos: { x: 40, y: 60, w: 280, h: 80 } },
				{ num: 2, text: "点击躺平发育", x: 30, y: 210, imgPos: { x: 40, y: 60, w: 280, h: 160 } },
				{ num: 3, text: "领取奖励", x: 30, y: 450, imgPos: { x: 80, y: 80, w: 280, h: 160 } }
				// { num: 2, text: "点击躺平发育", imgPos: {x: 80, y: 480} },
				// { num: 3, text: "领取奖励", imgPos: {x: 80, y: 710} }
			]
		};

		this.isVisible = false;
	}

	render(ctx) {
		let cebianlanBg = GameGlobal.databus.image.cebianlanBg
		let delBg = GameGlobal.databus.image.delBg

		if (!this.isVisible) return;

		this.isVisible = false;
		const { canvas } = GameGlobal.databus;
		const { panel, colors } = this.config;
		const centerX = (canvas.width - panel.w) / 2 + panel.x;
		const centerY = (canvas.height - panel.h) / 2 + panel.y;
		// 暗色遮罩层
		ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
		ctx.fillRect(0, 0, canvas.width, canvas.height);

		// 主面板（深绿色渐变）
		ctx.save();
		this.drawPanel(ctx, centerX, centerY, panel.w, panel.h, colors.mainBg);

		ctx.drawImage(cebianlanBg.value,
			centerX,
			centerY + 2,
			panel.w, panel.w * 1.31);


		ctx.drawImage(delBg.value,
			centerX - 10,
			centerY - 10,
			delBg.box.w, delBg.box.h);

		this.drawCoinReward(ctx, centerX + (panel.w - 200) / 2, centerY + panel.h - 120);
		let text=''
		if(GameGlobal.databus.silingqu===0){
			text='进入侧边栏'
		}else if(GameGlobal.databus.silingqu===1){
			text='领取奖励'
		}else{
			text='已经领取'
		}
		// 领取按钮
		this.drawActionButton(ctx,text,
			centerX + (panel.w - 220) / 2,
			centerY + panel.h - 100,
			220, 60
		);

		ctx.restore();
	}
	// 点击侧边弹窗页页面
	checkClick(x, y) {
		let delBg = GameGlobal.databus.image.delBg
		let canvas = GameGlobal.databus.canvas
		const { panel, colors } = this.config;
		const centerX = (canvas.width - panel.w) / 2 + panel.x;
		const centerY = (canvas.height - panel.h) / 2 + panel.y;

		let ctx = GameGlobal.databus.ctx
		const delbtn = {
			x: centerX - 10,
			y: centerY - 10,
			w: delBg.box.w,
			h: delBg.box.h
		}
		const linqubtn = {
			x: centerX + (panel.w - 220) / 2,
			y: centerY + panel.h - 100,
			w: 220,
			h: 60
		}
		// 点击侧边弹窗页关闭页
		if (this.isInRect(x, y, linqubtn)) {
			if(GameGlobal.databus.silingqu===0){
				// 是否触摸入口按钮
				tt.checkScene({
					scene: "sidebar",
					success: (res) => {
						console.log("check scene success: ", res.isExist);
						if (res.isExist) {
							tt.navigateToScene({
								scene: 'sidebar',
								fail: console.log,
								success: console.log
							})
						}
						//成功回调逻辑
					},
					fail: (res) => {
						console.log("check scene fail:", res);
						//失败回调逻辑
					}
				});
			}else if(GameGlobal.databus.silingqu===1){
				GameGlobal.databus.goldNumber+=100
				GameGlobal.databus.silingqu=2
				this.isVisible = true;
				GameGlobal.databus.homethis.render()
			}else{
				// text='已经领取'
			}

			console.log('领取', x, y)
		} else if (this.isInRect(x, y, delbtn)) {
			this.isVisible = false;

			const indexClick = new ClickIndex()
			indexClick.homeState='init'
			GameGlobal.databus.homethis.render()

		} else {
			console.log("其他")
		}
	}
	// 点击检测方法
	handleTap(ctx) {
		console.log("点击小游戏图标")
		this.isVisible = true;
		this.render(ctx)
		// 实现按钮点击逻辑
	}

	// 金币奖励展示
	drawCoinReward(ctx, x, y) {
		ctx.font = 'bold 48px Arial';
		ctx.fillStyle = '#FFD700';
		ctx.fillText("金币 x100", x, y);

		// 这里可添加金币图标绘制
	}

	// 操作按钮
	drawActionButton(ctx, text, x, y, w, h) {
		ctx.beginPath();
		
		this.drawRoundedRectComplex(ctx,x, y, w, h, 30)
		// ctx.roundRect(x, y, w, h, 30);

		// 按钮渐变
		const gradient = ctx.createLinearGradient(x, y, x, y + h);
		gradient.addColorStop(0, '#4CAF50');
		gradient.addColorStop(1, '#388E3C');
		ctx.fillStyle = gradient;
		ctx.fill();

		// 按钮文字
		ctx.font = 'bold 32px "Microsoft Yahei"';
		ctx.fillStyle = 'white';
		ctx.textAlign = 'center';
		ctx.fillText(text, x + w / 2, y + 42);
	}

	// 通用面板绘制
	drawPanel(ctx, x, y, w, h, colors) {
		
		console.log("11111",ctx.fillRect)
		console.log("11111",ctx.arc)
		console.log("通用面板绘制")
		ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
		ctx.shadowOffsetX = 8;
		ctx.shadowOffsetY = 8;
		ctx.shadowBlur = 15;

		// 面板渐变
		const gradient = ctx.createLinearGradient(x, y, x, y + h);
		gradient.addColorStop(0, colors[0]);
		gradient.addColorStop(1, colors[1]);

		
		ctx.beginPath();
		
		this.drawRoundedRectComplex(ctx,x, y, w, h, this.config.panel.radius)
		// ctx.roundRect(x, y, w, h, this.config.panel.radius);
		ctx.fillStyle = gradient;
		ctx.fill();
	}
	 drawRoundedRectComplex(ctx, x, y, w, h, radii) {
		ctx.beginPath();
		// 分别设置四个角的半径（顺序：左上、右上、右下、左下）
		ctx.moveTo(x + radii, y);
		ctx.arcTo(x + w, y, x + w, y + radii, radii);
		ctx.arcTo(x + w, y + h, x + w - radii, y + h, radii);
		ctx.arcTo(x, y + h, x, y + h - radii, radii);
		ctx.arcTo(x, y, x + radii, y, radii);
		ctx.closePath();
	}

	// 辅助函数
	isInRect(x, y, rect) {
		return x >= rect.x && x <= rect.x + rect.w &&
			y >= rect.y && y <= rect.y + rect.h;
	}
}